<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link th:replace="includes :: link">
    <script th:replace="includes :: script"></script>
    <style th:replace="includes :: style"></style>

    <link th:href="@{css/page.css}" rel="stylesheet"/>
    <script th:src="@{js/channelData.js}"></script>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-anim layui-anim-fadein" style="padding:15px">
    <div class="layui-card">
        <div class="layui-card-body">
            <!--        <div style="padding: 15px;">page2</div>-->
            <div class="table-title">
                <span>训练历史记录</span>
            </div>
            <table class="layui-hide" id="remHistory"></table>
            <div class="layui-form layui-form-pane" style="margin-top: 36px;">
                <div class="layui-form-item layui-inline">
                    <label class="layui-form-label">开始通道</label>
                    <div class="layui-input-inline" style="width: 100px;">
                        <input type="text" name="modelStart" class="layui-input" th:value="${session.modelStart ?: 'A09'}">
                    </div>
                    <div class="layui-form-mid">-</div>
                    <label class="layui-form-label">结束通道</label>
                    <div class="layui-input-inline" style="width: 100px;">
                        <input type="text" name="modelEnd" class="layui-input" th:value="${session.modelEnd ?: 'A10'}">
                    </div>
                </div>
                <div class="layui-form-item layui-inline" pane>
                    <label class="layui-form-label">重新训练</label>
                    <div class="layui-input-block">
                        <input type="radio" name="ctnue" value="false" title="是" checked>
                        <input type="radio" name="ctnue" value="true" title="否">
                    </div>
                </div>
                <div class="layui-form-item  layui-inline">
                    <button id="start-btn" class="layui-btn">开启训练服务</button>
                    <button id="remodel-btn" class="layui-btn" value="false">训练开始</button>
                    <button id="closePid-btn" class="layui-btn">停止</button>
                </div>
                <!--<div class="layui-form-item">
                    <div class="layui-input-inline">
                        <select id="taskIds">
                            <option value="">选择模型批次</option>
                            <option th:each="o:${list}">
                                <span th:value="${o.taskId}" th:text="${o.taskId}"></span>
                            </option>
                        </select>
                    </div>
                    <button id="test-btn" class="layui-btn">展示</button>
                </div>-->
            </div>
            <script>
                $('#start-btn').on('click', function () {
                    $.ajax({
                        url: 'start',
                        success: function (result) {
                            // console.log(result);
                        }

                    });
                })
            </script>

            <!--</form>-->
            <div class="model-progress">
                <div class="layui-progress layui-progress-big" lay-showpercent="true" lay-filter="demo">
                    <div class="layui-progress-bar layui-bg-green" lay-percent=""></div>
                    <div class="layui-progress-bar layui-bg-green" lay-percent=""></div>
                </div>
            </div>

            <div class="model-show">
                <div class=" layui-form layui-form-pane"> <!-- action="showmodels_test"-->
                    <div class="layui-form-item">
                        <div class="layui-input-inline">
                            <select id="taskIds">
                                <option value="">选择模型批次</option>
                                <option th:each="o:${list}" th:value="${o.taskId}" th:text="${o.taskId}"></option>
                                <!--<option th:each="o:${list}">
                                    <span th:value="${o.taskId}" th:text="${o.taskId}"></span>
                                </option>-->
                            </select>
                        </div>
                        <button id="test-btn" class="layui-btn">展示</button>
<!--                        <button class="layui-btn" id="showmodels-btn" type="button">展示已有模型</button>-->
                    </div>
                </div>
            </div>

            <!--            <div id="main" style="width:100%;height:400px;margin:auto;"></div>-->
            <div class="model-chart">
                <div class="table-title">
                    <span>模型分布图</span>
                </div>
                <!--<table class="layui-hide" id="shm"></table>-->
                <div id="modelChart" style="width: 100%; height: 800px;"></div>
            </div>
        </div>
    </div>
</div>

<script>
    /*<![CDATA[*/
    // $.get('channel_list', function (result) {
    //     console.log(result)
    // });
    layui.use('table', function () {
        var table = layui.table;

        var option = {
            id: 'remHistory',
            elem: '#remHistory',
            url: 'remHistory',
            where: {DEL_FLAG_NORMAL: 0},
            cellMinWidth: 70,
            even: false,
            cols: [
                [
                    // {field: 'id', title: '唯一标识', sort: true, align: 'center'},
                    {field: 'taskId', title: '训练批次ID', sort: true, align: 'center'},
                    {field: 'codes', title: '已有模型', sort: true, align: 'center'},
                    // {field: 'unit.id', title: 'UNITID', align: 'center'},
                    {field: 'createDate', title: '训练时间', minWidth: 100, align: 'center'}, //minWidth：局部定义当前单元格的最小宽度，layui 2.2.1 新增
                    // {field: 'delFlag', title: 'DELFLAG', align: 'center'}
                ]
            ],
            page: true,
            response: {},
            parseData: function (data) {
            }
        };
        table.render(option);
    });
    /*]]>*/
</script>


<script>
    /*<![CDATA[*/
    layui.use('element', function () {
        var element = layui.element;

        // 基于准备好的dom，初始化echarts实例
        // var myChart = echarts.init(document.getElementById('main'), 'vintage');
        // 指定图表的配置项和数据
        var option = {
            title: {
                text: 'RFSPReactor'
            },
            tooltip: {},
            legend: {
                data: ['RFSPReactor']
            },
            xAxis: {min: "dataMin", max: "dataMax"},
            yAxis: {},
            series: [{
                name: 'fpd',
                type: 'line'
            }]
        };

        // $.ajax({
        //     url: 'list',
        //     data: {},
        //     success: function (data) {
        //         option.series[0].data = _.map(data, function (o) { return [o.fpd, o.eclock] });
        //         myChart.setOption(option);
        //     }
        // });

        var codes = [];
        var ratio = 0;
        var total = 380;
        var channel_total = ["A09", "A10", "A11", "A12", "A13", "A14", "B06", "B07", "B08", "B09", "B10", "B11", "B12", "B13", "B14", "B15", "B16", "B17", "C05", "C06", "C07", "C08", "C09", "C10", "C11", "C12", "C13", "C14", "C15", "C16", "C17", "C18", "D04", "D05", "D06", "D07", "D08", "D09", "D10", "D11", "D12", "D13", "D14", "D15", "D16", "D17", "D18", "D19", "E03", "E04", "E05", "E06", "E07", "E08", "E09", "E10", "E11", "E12", "E13", "E14", "E15", "E16", "E17", "E18", "E19", "E20", "F03", "F04", "F05", "F06", "F07", "F08", "F09", "F10", "F11", "F12", "F13", "F14", "F15", "F16", "F17", "F18", "F19", "F20", "G02", "G03", "G04", "G05", "G06", "G07", "G08", "G09", "G10", "G11", "G12", "G13", "G14", "G15", "G16", "G17", "G18", "G19", "G20", "G21", "H02", "H03", "H04", "H05", "H06", "H07", "H08", "H09", "H10", "H11", "H12", "H13", "H14", "H15", "H16", "H17", "H18", "H19", "H20", "H21", "J01", "J02", "J03", "J04", "J05", "J06", "J07", "J08", "J09", "J10", "J11", "J12", "J13", "J14", "J15", "J16", "J17", "J18", "J19", "J20", "J21", "J22", "K01", "K02", "K03", "K04", "K05", "K06", "K07", "K08", "K09", "K10", "K11", "K12", "K13", "K14", "K15", "K16", "K17", "K18", "K19", "K20", "K21", "K22", "L01", "L02", "L03", "L04", "L05", "L06", "L07", "L08", "L09", "L10", "L11", "L12", "L13", "L14", "L15", "L16", "L17", "L18", "L19", "L20", "L21", "L22", "M01", "M02", "M03", "M04", "M05", "M06", "M07", "M08", "M09", "M10", "M11", "M12", "M13", "M14", "M15", "M16", "M17", "M18", "M19", "M20", "M21", "M22", "N01", "N02", "N03", "N04", "N05", "N06", "N07", "N08", "N09", "N10", "N11", "N12", "N13", "N14", "N15", "N16", "N17", "N18", "N19", "N20", "N21", "N22", "O01", "O02", "O03", "O04", "O05", "O06", "O07", "O08", "O09", "O10", "O11", "O12", "O13", "O14", "O15", "O16", "O17", "O18", "O19", "O20", "O21", "O22", "P02", "P03", "P04", "P05", "P06", "P07", "P08", "P09", "P10", "P11", "P12", "P13", "P14", "P15", "P16", "P17", "P18", "P19", "P20", "P21", "Q02", "Q03", "Q04", "Q05", "Q06", "Q07", "Q08", "Q09", "Q10", "Q11", "Q12", "Q13", "Q14", "Q15", "Q16", "Q17", "Q18", "Q19", "Q20", "Q21", "R03", "R04", "R05", "R06", "R07", "R08", "R09", "R10", "R11", "R12", "R13", "R14", "R15", "R16", "R17", "R18", "R19", "R20", "S03", "S04", "S05", "S06", "S07", "S08", "S09", "S10", "S11", "S12", "S13", "S14", "S15", "S16", "S17", "S18", "S19", "S20", "T04", "T05", "T06", "T07", "T08", "T09", "T10", "T11", "T12", "T13", "T14", "T15", "T16", "T17", "T18", "T19", "U05", "U06", "U07", "U08", "U09", "U10", "U11", "U12", "U13", "U14", "U15", "U16", "U17", "U18", "V06", "V07", "V08", "V09", "V10", "V11", "V12", "V13", "V14", "V15", "V16", "V17", "W09", "W10", "W11", "W12", "W13", "W14"]
        var interval = null;

        // var yx = _.zipWith(x, y, function (x, y) {
        //     return y + x;
        // });


        // console.log(channel_total);
        // const index = channel_total.findIndex(item=> item === 'A09');
        // console.log(index);


        var showProgress = function (mode) {
            return new Promise(function (resolve) {
                $.ajax({
                    url: 'channel_done',
                    data: {mode: mode},
                    beforeSend: function () {},
                    complete: function () {},
                    success: function (result) {
                        codes = result;
                        ratio = (result.length / total * 100).toFixed(1);
                        // console.log(codes);
                        // console.log(ratio);
                        element.progress('demo', ratio + '%');
                        resolve(result.length);
                    }
                });
            });
        };

        var rserveRun = function () {
            return new Promise(function (resolve) {
                $.get('rserveRun', function (result) {
                    console.log("part1===is modelling?" + result);
                    resolve(result);
                });
            });
        };
        
        setTimeout(function () {
            Promise.all([rserveRun(), showProgress('init')]).then(function (values) {
                var modelStart = $('[name=modelStart]').val();
                var modelEnd = $('[name=modelEnd]').val();
                var modelStartNum = _.findIndex(channel_total, function (item) {
                    return item === modelStart;
                });
                var modelEndNum = _.findIndex(channel_total, function (item) {
                    return item === modelEnd;
                });
                if (values[0] && values[1] / (Number(modelEndNum) - Number(modelStartNum) + 1) !== 1) {
                    getProgress(modelStartNum, modelEndNum, false);
                }
            });
        }, 300);
        

        var DISABLED = 'layui-btn-disabled';

        function getProgress(modelStartNum, modelEndNum) {
            var func = function (len) {
                if (len / (Number(modelEndNum) - Number(modelStartNum) + 1) === 1) {
                    clearInterval(interval);
                    interval = null;
                    // $('#remodel-btn').removeClass(DISABLED).attr("disabled", false);
                    window.location.reload();
                }
            };

            interval = setInterval(function () {
                showProgress('rem').then(func);
            }, 2000);

            $('#remodel-btn').addClass(DISABLED).attr("disabled", true);
        }


        $('#remodel-btn').on('click', function () {
            var $this = $(this);
            var modelStart = $('[name=modelStart]').val();
            var modelEnd = $('[name=modelEnd]').val();
            var modelStartNum = _.findIndex(channel_total, function (item) {
                return item === modelStart;
            });
            var modelEndNum = _.findIndex(channel_total, function (item) {
                return item === modelEnd;
            });
            var ctnue = $('[name=ctnue]:checked').val();
            console.log(ctnue);
            $.ajax({
                url: 'JR_rem',
                data: {modelStart: modelStart, modelEnd: modelEnd, ctnue: ctnue},
                success: function (rexp) {
                }
            });

            if ($this.hasClass(DISABLED)) return;

            getProgress(modelStartNum, modelEndNum, false);
        });

        $('#closePid-btn').on('click', function () {
            $.ajax({
                url: 'stop',
                success: function (result) {
                    // console.log(result);
                    if (result && interval) clearInterval(interval);
                }
            });
        });

        // $('#showmodels-btn').on('click', function () {
        //     $.ajax({
        //         url: 'JR_shm',
        //         data: {},
        //         success: function (rexp) {
        //             console.log(rexp);
        //         }
        //     });
        // });
        // $.ajax({
        //     url: 'JR',
        //     data: {},
        //     success:function (data) {
        //         console.log(data)
        //     }
        // });
        // window.onresize = myChart.resize
    })
    ;
    /*]]>*/
</script>

<script>
    /*<![CDATA[*/
    layui.use('table', function () {
        var table = layui.table;

        var option = {
            id: 'shm',
            elem: '#shm',
            // url: 'test',
            cellMinWidth: 40,
            cols: [],
            pagination: true,
            response: {
                statusCode: 200 //重新规定成功的状态码为 200，table 组件默认为 0
            },
            parseData: function (data) {
                // var fields = _.range(1,22);
                var cols = _.chain(data).sample().keys().map(function (k) {
                    return {field: k, sort: false, align: 'center'}
                }).value();
                this.cols[0] = cols;
                return {
                    "code": 200,
                    // "msg": res.message,
                    // "count": res.total,
                    "data": data
                };
            }
        };
        table.render(option);
        $('#showmodels-btn').on('click', function () {
            table.reload('shm', {
                cols: [],
                url: 'JR_shm',
                pagination: {
                    curr: 1 //重新从第 1 页开始
                }
            }, 'data');
        });
    });
    /*]]>*/
</script>
<script>
    /*<![CDATA[*/
    layui.use('element', function () {
        var element = layui.element;
        top.document.getElementsByTagName('iframe')[0].style.minHeight = '1700px';
    });
    /*]]>*/
</script>
<script>
    var data = [];
    if (channelData && channelData.length > 0) {
        for (var i = 0; i < channelData.length; i++) {
            var _data = [channelData[i].detectorx, channelData[i].detectory, ''];
            data.push({
                value: _data,
                itemStyle: {color: '#80C9C2'}
            });
        }
    };
    var option = {
        tooltip: {
            position: 'top'
        },
        animation: true,
        // grid: {borderColor:"#880000"},
        xAxis: [
            {
                type: 'category',
                min: 1,
                splitArea: {
                    show: true,
                    areaStyle: {
                        color: '#EEEEEE'
                    }
                },
                data: ['','01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15','16','17','18','19','20','21','22'],
            },
            {
                type: 'category',
                min: 1,
                splitArea: {
                    show: true,
                    areaStyle: {
                        color: '#EEEEEE'
                    }
                },
                data: ['','01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15','16','17','18','19','20','21','22'],
            }
        ],
        yAxis: [
            {
                type: 'category',
                min: 1,
                splitArea: {
                    show: true,
                    areaStyle: {
                        color: '#EEEEEE'
                    }
                },
                data: ['','A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W'],
                inverse: true
            },
            {
                type: 'category',
                min: 1,
                splitArea: {
                    show: true,
                    areaStyle: {
                        color: '#EEEEEE'
                    }
                },
                data: ['','A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W'],
                inverse: true
            }
            ],
        series: [{
            type: 'heatmap',
            data: data,
            itemStyle: {
                borderWidth: 1,
                borderColor: '#ffffff'
            },
            tooltip: {
                show: false
            },
        }
        ]
    };
    var myChart = echarts.init($('#modelChart')[0]);
    myChart.setOption(option);


    $('#test-btn').on('click', function () {
        $.get('get', {taskId: $('#taskIds').val()}, function (result) {
            var code = result.codes;
            var items = [];
            for (var i = 0; i < channelData.length; i++) {
                var _data = [channelData[i].detectorx, channelData[i].detectory, ''];
                var channel = channelData[i].channelnum;
                var color = '#80C9C2';
                if (code && code.indexOf(channel) >= 0){
                    color = '#fa9c00';
                }
                items.push({
                    value: _data,
                    itemStyle: {color: color}
                });
            }
            option.series[0].data = items;
            myChart.setOption(option);
        });
    })
</script>
</body>
</html>